<template>
    <div style="width: 50%; margin: 10px auto;">
        <div style="margin-bottom: 10px;">
            <el-input v-model="title" placeholder="请输入标题关键字查询" style="width: 300px;margin-right: 10px;" clearable></el-input>
            <el-button type="primary" @click="load(1)">查询</el-button>
        </div>
        <div class="card" v-for="item in tableData" :key="item.id" style="margin-bottom: 5px; display: flex;grid-gap: 10px;">
            <img :src="item.avatar" alt="" style="width: 50px;height: 50px;display: block;border-radius: 50%;">
            <div style="flex: 1;">
                <div style="margin-bottom: 5px;">
                    <strong style="margin-right: 5px;">{{ item.title }}</strong> 
                    <el-tag type="danger" v-if="item.solved === '未解决'">未解决</el-tag>
                    <el-tag type="success" v-if="item.solved === '已解决'">已解决</el-tag>
                </div>
                <div style="color: #888;"><span style="margin-right: 20px;">{{ item.userName }}</span>  <span>{{ item.time }}</span></div>

                <div style="margin: 15px 0;">
                    <el-image :preview-src-list="[item.img]" :src="item.img" alt="" style="width: 200px;"></el-image>
                </div>
                <div v-html="item.content" style="margin: 15px 0;"></div>
                <div style="margin-bottom: 15px;">
                    <el-button type="primary" @click="handleCommentShow(item)">展开 / 折叠 求购评论</el-button>
                </div>
                <!-- 若未初始化，v-if="item.showComment"会因undefined视为假值而不渲染，但非严格的false。 -->
                <div v-if="item.showComment">
                    <Comment :fid="item.id" module="help" />
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div style="margin: 15px auto;" v-if="total>0"> 
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
    </div>
</template>

<script>
import Comment from '@/components/Comment.vue'

export default{
    name:"Help",
    components:{Comment},
    data(){
        return {
            tableData: [],  // 所有的数据
            pageNum: 1,   // 当前的页码
            pageSize: 5,  // 每页显示的个数
            total: 0,
            title:'',
        }
    },
    created() {
        this.load(1)
    },
    methods: {
        handleCommentShow(help){
            this.$set(help,'showComment',!help.showComment)
        },
        load(pageNum) {  // 分页查询
            if (pageNum) this.pageNum = pageNum
                this.$request.get('/help/selectFrontPage', {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    title: this.title
                }
                }).then(res => {
                if (res.code === '200') {
                    this.tableData = res.data?.list
                    this.total = res.data?.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleCurrentChange(pageNum) {
            this.load(pageNum)
        },
    },
}
</script>

<style scoped>

</style>